<script type="text/template" id="slide-captcha">
    <div class="slider">
        <div class="content">
            <div class="bg-img-div">
                <img id="bg-img" src="" alt/>
            </div>
            <div class="slider-img-div" id="slider-img-div">
                <img id="slider-img" src="" alt/>
            </div>
        </div>
        <div class="slider-move">
            <div class="slider-move-track">
                拖动滑块完成拼图
            </div>
            <div class="slider-move-btn" id="slider-move-btn"></div>
        </div>
        <div class="bottom">
<#--            <div class="close-btn" id="slider-close-btn"></div>-->
            <div class="refresh-btn" id="slider-refresh-btn"></div>
        </div>
    </div>

</script>
<script>
    Vue.component('slide-captcha', {
            template: '#slide-captcha',
            data() {
                return {
                    currentCaptchaId: undefined,
                    captchaConfig: {}
                }
            },
            mounted() {
                //随机生成数this.block_x =
                this.init()
            },
            methods: {
                init() {
                    this.clearAllPreventDefault($(".slider"));
                    this.refreshCaptcha();
                    $("#slider-move-btn").mousedown(this.down);
                    $("#slider-move-btn").on("touchstart", this.down);

                    $("#slider-close-btn").click(() => {

                    });

                    $("#slider-refresh-btn").click(() => {
                        this.refreshCaptcha();
                    });
                },
                valid(captchaConfig) {
                    let data = {
                        bgImageWidth: captchaConfig.bgImageWidth,
                        bgImageHeight: captchaConfig.bgImageHeight,
                        templateImageWidth: captchaConfig.templateImageWidth,
                        templateImageHeight: captchaConfig.templateImageHeight,
                        startSlidingTime: captchaConfig.startTime,
                        entSlidingTime: captchaConfig.stopTime,
                        trackList: captchaConfig.trackArr
                    };
                    console.log("valid", captchaConfig, data);
                    let param = {id: this.currentCaptchaId, jsonStr: JSON.stringify(data)};
                    this.$emit("valid", param)
                    // this.ajax("/check", param, function (data) {
                    //     if (data.code == 0) {
                    //         this.$emit("success", param)
                    //         this.$message("验证成功")
                    //     } else {
                    //         this.$message(data.msg)
                    //     }
                    // }.bind(this));
                },
                refreshCaptcha() {
                    this.ajax("/gen", {}, function (res) {
                        this.reset();
                        this.currentCaptchaId = res.data.id;
                        const bgImg = $("#bg-img");
                        const sliderImg = $("#slider-img");
                        bgImg.attr("src", res.data.captcha.backgroundImage);
                        sliderImg.attr("src", res.data.captcha.templateImage);
                        this.initConfig(bgImg.width(), bgImg.height(), sliderImg.width(), sliderImg.height(), 206);
                    }.bind(this))
                },
                doDown() {
                    $("#slider-move-btn").css("background-position", "-5px 31.0092%")
                },
                doMove(currentCaptchaConfig) {
                    const moveX = currentCaptchaConfig.moveX;
                    $("#slider-move-btn").css("transform", "translate(" + moveX + "px, 0px)")
                    $("#slider-img-div").css("transform", "translate(" + moveX + "px, 0px)")
                },
                reset() {
                    $("#slider-move-btn").css("background-position", "-5px 11.79625%")
                    $("#slider-move-btn").css("transform", "translate(0px, 0px)")
                    $("#slider-img-div").css("transform", "translate(0px, 0px)")
                    this.currentCaptchaId = null;
                },
                clearPreventDefault(event) {
                    if (event.preventDefault) {
                        event.preventDefault();
                    }
                },

                clearAllPreventDefault($div) {
                    $div.each(function (index, el) {
                        el.addEventListener('touchmove', this.clearPreventDefault, false);
                    });
                },

                reductionAllPreventDefault($div) {
                    $div.each(function (index, el) {
                        el.removeEventListener('touchmove', this.clearPreventDefault);
                    });
                },


                initConfig(bgImageWidth, bgImageHeight, sliderImageWidth, sliderImageHeight, end) {
                    currentCaptchaConfig = {
                        startTime: new Date(),
                        trackArr: [],
                        movePercent: 0,
                        bgImageWidth,
                        bgImageHeight,
                        sliderImageWidth,
                        sliderImageHeight,
                        end
                    }
                    return currentCaptchaConfig;
                },

                down(event) {
                    let targetTouches = event.originalEvent ? event.originalEvent.targetTouches : event.targetTouches;
                    let startX = event.pageX;
                    let startY = event.pageY;
                    if (startX === undefined) {
                        startX = Math.round(targetTouches[0].pageX);
                        startY = Math.round(targetTouches[0].pageY);
                    }
                    currentCaptchaConfig.startX = startX;
                    currentCaptchaConfig.startY = startY;

                    const pageX = currentCaptchaConfig.startX;
                    const pageY = currentCaptchaConfig.startY;
                    const startTime = currentCaptchaConfig.startTime;
                    const trackArr = currentCaptchaConfig.trackArr;
                    trackArr.push({
                        x: pageX - startX,
                        y: pageY - startY,
                        type: "down",
                        t: (new Date().getTime() - startTime.getTime())
                    });
                    // pc
                    window.addEventListener("mousemove", this.move);
                    window.addEventListener("mouseup", this.up);
                    // 手机端
                    window.addEventListener("touchmove", this.move, false);
                    window.addEventListener("touchend", this.up, false);
                    this.doDown(currentCaptchaConfig);
                },

                move(event) {
                    if (event instanceof TouchEvent) {
                        event = event.touches[0];
                    }
                    let pageX = Math.round(event.pageX);
                    let pageY = Math.round(event.pageY);
                    const startX = currentCaptchaConfig.startX;
                    const startY = currentCaptchaConfig.startY;
                    const startTime = currentCaptchaConfig.startTime;
                    const end = currentCaptchaConfig.end;
                    const bgImageWidth = currentCaptchaConfig.bgImageWidth;
                    const trackArr = currentCaptchaConfig.trackArr;
                    let moveX = pageX - startX;
                    const track = {
                        x: pageX - startX,
                        y: pageY - startY,
                        type: "move",
                        t: (new Date().getTime() - startTime.getTime())
                    };
                    trackArr.push(track);
                    if (moveX < 0) {
                        moveX = 0;
                    } else if (moveX > end) {
                        moveX = end;
                    }
                    currentCaptchaConfig.moveX = moveX;
                    currentCaptchaConfig.movePercent = moveX / bgImageWidth;
                    this.doMove(currentCaptchaConfig);
                },

                up(event) {
                    window.removeEventListener("mousemove", this.move);
                    window.removeEventListener("mouseup", this.up);
                    window.removeEventListener("touchmove", this.move);
                    window.removeEventListener("touchend", this.up);
                    if (event instanceof TouchEvent) {
                        event = event.changedTouches[0];
                    }
                    currentCaptchaConfig.stopTime = new Date();
                    let pageX = Math.round(event.pageX);
                    let pageY = Math.round(event.pageY);
                    const startX = currentCaptchaConfig.startX;
                    const startY = currentCaptchaConfig.startY;
                    const startTime = currentCaptchaConfig.startTime;
                    const trackArr = currentCaptchaConfig.trackArr;

                    const track = {
                        x: pageX - startX,
                        y: pageY - startY,
                        type: "up",
                        t: (new Date().getTime() - startTime.getTime())
                    }

                    trackArr.push(track);
                    this.valid(currentCaptchaConfig);
                }
            }
        }
    )
</script>
<style>
    .slider {
        background-color: #fff;
        width: 278px;
        height: 285px;
        z-index: 999;
        box-sizing: border-box;
        padding: 9px;
        border-radius: 6px;
        box-shadow: 0 0 11px 0 #999999;
    }

    .slider .content {
        width: 100%;
        height: 159px;
        position: relative;
    }

    .bg-img-div {
        width: 100%;
        height: 100%;
        position: absolute;
        transform: translate(0px, 0px);
    }

    .slider-img-div {
        height: 100%;
        position: absolute;
        transform: translate(0px, 0px);
    }

    .bg-img-div img {
        width: 100%;
    }

    .slider-img-div img {
        height: 100%;
    }

    .slider .slider-move {
        height: 60px;
        width: 100%;
        margin: 11px 0;
        position: relative;
    }

    .slider .bottom {
        height: 19px;
        width: 100%;
    }

    .refresh-btn, .close-btn, .slider-move-track, .slider-move-btn {
        background: url(https://static.geetest.com/static/ant/sprite.1.2.4.png) no-repeat;
    }

    .refresh-btn, .close-btn {
        display: inline-block;
    }

    .slider-move .slider-move-track {
        line-height: 38px;
        font-size: 14px;
        text-align: center;
        white-space: nowrap;
        color: #88949d;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .slider {
        user-select: none;
    }

    .slider-move .slider-move-btn {
        transform: translate(0px, 0px);
        background-position: -5px 11.79625%;
        position: absolute;
        top: -12px;
        left: 0;
        width: 66px;
        height: 66px;
    }

    .slider-move-btn:hover, .close-btn:hover, .refresh-btn:hover {
        cursor: pointer
    }

    .bottom .close-btn {
        width: 20px;
        height: 20px;
        background-position: 0 44.86874%;
    }

    .bottom .refresh-btn {
        width: 20px;
        height: 20px;
        background-position: 0 81.38425%;
    }
</style>